<template>
  <div class="app-container">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <div class="welcome-text">
          <h1 class="welcome-title">我的课程学习</h1>
          <p class="welcome-subtitle">继续你的学习之旅，提升编程技能！</p>
        </div>
        <div class="welcome-actions">
          <el-button type="primary" icon="el-icon-plus" @click="handleBrowseCourses">
            浏览新课程
          </el-button>
          <el-button type="success" icon="el-icon-refresh" @click="refreshProgress">
            刷新进度
          </el-button>
        </div>
      </div>
    </div>

    <!-- 学习统计概览 -->
    <div class="stats-overview">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-card primary">
            <div class="stat-icon">
              <i class="el-icon-reading"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.totalCourses }}</div>
              <div class="stat-label">在学课程</div>
              <div class="stat-trend">
                <i class="el-icon-arrow-up"></i>
                <span>较上月 +2</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card success">
            <div class="stat-icon">
              <i class="el-icon-check"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.completedCourses }}</div>
              <div class="stat-label">已完成</div>
              <div class="stat-trend">
                <i class="el-icon-arrow-up"></i>
                <span>本周 +1</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card warning">
            <div class="stat-icon">
              <i class="el-icon-time"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.weeklyStudyTime }}</div>
              <div class="stat-label">本周学习(小时)</div>
              <div class="stat-trend">
                <i class="el-icon-arrow-up"></i>
                <span>较上周 +3.5</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card info">
            <div class="stat-icon">
              <i class="el-icon-data-line"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.avgProgress }}%</div>
              <div class="stat-label">平均进度</div>
              <div class="stat-trend">
                <i class="el-icon-arrow-up"></i>
                <span>较上周 +5%</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 快速筛选和搜索 -->
    <div class="quick-filters">
      <el-row :gutter="20">
        <el-col :span="18">
          <div class="filter-tabs">
            <el-radio-group v-model="activeFilter" @change="handleFilterChange">
              <el-radio-button label="all">全部课程</el-radio-button>
              <el-radio-button label="active">进行中</el-radio-button>
              <el-radio-button label="completed">已完成</el-radio-button>
              <el-radio-button label="recent">最近学习</el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="6">
        <el-input
            v-model="searchKeyword"
            placeholder="搜索课程名称..."
            prefix-icon="el-icon-search"
          clearable
            @input="handleSearch"
            class="search-input"
          />
        </el-col>
      </el-row>
    </div>

    <!-- 课程学习列表 -->
    <div class="courses-container">
      <el-row :gutter="20">
        <el-col 
          v-for="course in filteredCourses" 
          :key="course.enrollmentId" 
          :span="8"
          class="course-col"
        >
          <div class="course-card" :class="{ 'completed': course.status === 'completed' }">
            <div class="course-header">
              <div class="course-badge" :class="getCourseBadgeClass(course.status)">
                {{ getCourseStatusText(course.status) }}
              </div>
              <div class="course-actions">
                <el-dropdown @command="handleCourseAction" trigger="click">
                  <i class="el-icon-more"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{ action: 'continue', course: course }">
                      <i class="el-icon-video-play"></i> 继续学习
                    </el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'review', course: course }">
                      <i class="el-icon-view"></i> 查看详情
                    </el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'notes', course: course }">
                      <i class="el-icon-edit"></i> 学习笔记
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            
            <div class="course-content">
              <h3 class="course-title">{{ course.courseName || `课程${course.offeringId}` }}</h3>
              <p class="course-description">
                {{ course.courseDescription || '提升编程技能，掌握核心算法' }}
              </p>
              
              <div class="course-progress">
                <div class="progress-info">
                  <span class="progress-text">学习进度</span>
                  <span class="progress-percentage">{{ course.totalProgress || 0 }}%</span>
                </div>
                <el-progress 
                  :percentage="course.totalProgress || 0" 
                  :stroke-width="6"
                  :show-text="false"
                  :color="getProgressColor(course.totalProgress)"
                />
              </div>
              
              <div class="course-stats">
                <div class="stat-item">
                  <i class="el-icon-time"></i>
                  <span>{{ course.weeklyStudyTime || 0 }}小时/周</span>
                </div>
                <div class="stat-item">
                  <i class="el-icon-date"></i>
                  <span>{{ formatLastStudyTime(course.lastStudyTime) }}</span>
                </div>
              </div>
            </div>
            
            <div class="course-footer">
        <el-button
          type="primary"
                size="small" 
                @click="continueLearning(course)"
                :disabled="course.status === 'completed'"
              >
                {{ course.status === 'completed' ? '已完成' : '继续学习' }}
              </el-button>
        <el-button
                type="text" 
                size="small" 
                @click="viewCourseDetails(course)"
              >
                课程详情
              </el-button>
            </div>
          </div>
      </el-col>
    </el-row>

      <!-- 空状态 -->
      <div v-if="filteredCourses.length === 0" class="empty-state">
        <i class="el-icon-folder-opened"></i>
        <h3>暂无课程</h3>
        <p>你还没有选择任何课程，快去浏览新课程开始学习吧！</p>
        <el-button type="primary" @click="handleBrowseCourses">
          浏览课程
        </el-button>
      </div>
    </div>

    <!-- 学习建议 -->
    <div class="learning-suggestions">
      <h3 class="section-title">
        <i class="el-icon-lightbulb"></i> 学习建议
      </h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="suggestion-card">
            <div class="suggestion-icon">
              <i class="el-icon-time"></i>
            </div>
            <h4>制定学习计划</h4>
            <p>建议每天保持2-3小时的学习时间，保持学习的连续性</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="suggestion-card">
            <div class="suggestion-icon">
              <i class="el-icon-edit"></i>
            </div>
            <h4>做好学习笔记</h4>
            <p>记录学习过程中的重点和难点，便于复习和巩固</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="suggestion-card">
            <div class="suggestion-icon">
              <i class="el-icon-video-play"></i>
            </div>
            <h4>多动手实践</h4>
            <p>编程学习重在实践，多写代码，多调试，多思考</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 课程详情对话框 -->
    <el-dialog title="课程详情" :visible.sync="courseDetailVisible" width="70%" append-to-body>
      <div class="course-detail-content" v-if="selectedCourse">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="课程名称">{{ selectedCourse.courseName || `课程${selectedCourse.offeringId}` }}</el-descriptions-item>
          <el-descriptions-item label="学习状态">
            <el-tag :type="getCourseStatusType(selectedCourse.status)" size="small">
              {{ getCourseStatusText(selectedCourse.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="选课时间">{{ parseTime(selectedCourse.enrollmentTime) }}</el-descriptions-item>
          <el-descriptions-item label="最近学习">{{ parseTime(selectedCourse.lastStudyTime) || '未开始' }}</el-descriptions-item>
          <el-descriptions-item label="学习进度">
            <span class="progress-display">{{ selectedCourse.totalProgress || 0 }}%</span>
          </el-descriptions-item>
          <el-descriptions-item label="预计完成">{{ getEstimatedCompletion(selectedCourse) }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="learning-path">
          <h4>学习路径:</h4>
          <div class="path-steps">
            <div class="step-item" v-for="(step, index) in learningSteps" :key="index">
              <div class="step-number" :class="{ 'completed': index < Math.floor((selectedCourse.totalProgress || 0) / 25) }">
                {{ index + 1 }}
              </div>
              <div class="step-content">
                <div class="step-title">{{ step.title }}</div>
                <div class="step-desc">{{ step.description }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "StudentCourses",
  data() {
    return {
      // 统计数据
      stats: {
        totalCourses: 6,
        completedCourses: 2,
        weeklyStudyTime: 15.5,
        avgProgress: 68
      },
      // 活跃筛选
      activeFilter: 'all',
      // 搜索关键词
      searchKeyword: '',
      // 课程列表
      coursesList: [
        {
          enrollmentId: 1,
          offeringId: 101,
          courseName: '数据结构与算法基础',
          courseDescription: '学习基本数据结构，掌握常用算法思想',
          status: 'active',
          totalProgress: 75,
          weeklyStudyTime: 4,
          lastStudyTime: '2025-01-20 10:30:00',
          enrollmentTime: '2025-01-01 00:00:00'
        },
        {
          enrollmentId: 2,
          offeringId: 102,
          courseName: '程序设计基础',
          courseDescription: '掌握编程基本概念和语法规则',
          status: 'completed',
          totalProgress: 100,
          weeklyStudyTime: 0,
          lastStudyTime: '2025-01-15 16:20:00',
          enrollmentTime: '2024-12-01 00:00:00'
        },
        {
          enrollmentId: 3,
          offeringId: 103,
          courseName: '计算机网络原理',
          courseDescription: '了解网络协议和通信原理',
          status: 'active',
          totalProgress: 45,
          weeklyStudyTime: 3,
          lastStudyTime: '2025-01-19 14:15:00',
          enrollmentTime: '2025-01-10 00:00:00'
        },
        {
          enrollmentId: 4,
          offeringId: 104,
          courseName: '操作系统基础',
          courseDescription: '学习操作系统核心概念和原理',
          status: 'active',
          totalProgress: 30,
          weeklyStudyTime: 2,
          lastStudyTime: '2025-01-18 09:30:00',
          enrollmentTime: '2025-01-12 00:00:00'
        },
        {
          enrollmentId: 5,
          offeringId: 105,
          courseName: '数据库系统',
          courseDescription: '掌握数据库设计和SQL语言',
          status: 'active',
          totalProgress: 60,
          weeklyStudyTime: 3.5,
          lastStudyTime: '2025-01-20 15:45:00',
          enrollmentTime: '2025-01-05 00:00:00'
        },
        {
          enrollmentId: 6,
          offeringId: 106,
          courseName: '软件工程实践',
          courseDescription: '学习软件开发流程和方法论',
          status: 'active',
          totalProgress: 20,
          weeklyStudyTime: 2.5,
          lastStudyTime: '2025-01-17 11:20:00',
          enrollmentTime: '2025-01-15 00:00:00'
        }
      ],
      // 学习步骤
      learningSteps: [
        {
          title: '基础概念学习',
          description: '掌握课程基本概念和理论知识'
        },
        {
          title: '实践练习',
          description: '通过编程练习巩固所学知识'
        },
        {
          title: '项目实战',
          description: '完成综合性项目，提升实践能力'
        },
        {
          title: '知识总结',
          description: '整理学习笔记，形成知识体系'
        }
      ],
      // 课程详情对话框
      courseDetailVisible: false,
      selectedCourse: null
    }
  },
  computed: {
    filteredCourses() {
      let filtered = this.coursesList
      
      // 按状态筛选
      if (this.activeFilter !== 'all') {
        if (this.activeFilter === 'recent') {
          // 最近学习的课程（7天内）
          const sevenDaysAgo = new Date()
          sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7)
          filtered = filtered.filter(course => 
            course.lastStudyTime && new Date(course.lastStudyTime) > sevenDaysAgo
          )
        } else {
          filtered = filtered.filter(course => course.status === this.activeFilter)
        }
      }
      
      // 按关键词搜索
      if (this.searchKeyword) {
        filtered = filtered.filter(course => 
          course.courseName && course.courseName.toLowerCase().includes(this.searchKeyword.toLowerCase())
        )
      }
      
      return filtered
    }
  },
  methods: {
    /** 筛选变化处理 */
    handleFilterChange(filter) {
      this.activeFilter = filter
    },
    
    /** 搜索处理 */
    handleSearch() {
      // 搜索逻辑已在computed中处理
    },
    
    /** 浏览新课程 */
    handleBrowseCourses() {
      this.$message.info('课程浏览功能开发中...')
    },
    
    /** 刷新进度 */
    refreshProgress() {
      this.$message.success('学习进度已刷新')
      // 这里可以调用接口刷新数据
    },
    
    /** 继续学习 */
    continueLearning(course) {
      this.$router.push(`/system/course-learning?courseId=${course.offeringId}`)
    },
    
    /** 查看课程详情 */
    viewCourseDetails(course) {
      this.selectedCourse = course
      this.courseDetailVisible = true
    },
    
    /** 课程操作处理 */
    handleCourseAction(command) {
      const { action, course } = command
      switch (action) {
        case 'continue':
          this.continueLearning(course)
          break
        case 'review':
          this.viewCourseDetails(course)
          break
        case 'notes':
          this.$message.info('学习笔记功能开发中...')
          break
      }
    },
    
    /** 获取课程状态类型 */
    getCourseStatusType(status) {
      const typeMap = {
        'active': 'success',
        'completed': 'info',
        'paused': 'warning'
      }
      return typeMap[status] || 'info'
    },
    
    /** 获取课程状态文本 */
    getCourseStatusText(status) {
      const textMap = {
        'active': '进行中',
        'completed': '已完成',
        'paused': '暂停'
      }
      return textMap[status] || '未知'
    },
    
    /** 获取课程徽章样式 */
    getCourseBadgeClass(status) {
      const classMap = {
        'active': 'badge-active',
        'completed': 'badge-completed',
        'paused': 'badge-paused'
      }
      return classMap[status] || 'badge-active'
    },
    
    /** 获取进度颜色 */
    getProgressColor(progress) {
      if (progress >= 80) return '#67c23a'
      if (progress >= 60) return '#409eff'
      if (progress >= 40) return '#e6a23c'
      return '#f56c6c'
    },
    
    /** 格式化最后学习时间 */
    formatLastStudyTime(time) {
      if (!time) return '未开始'
      const lastStudy = new Date(time)
      const now = new Date()
      const diffHours = (now - lastStudy) / (1000 * 60 * 60)
      if (diffHours < 24) return `${Math.floor(diffHours)}小时前`
      if (diffHours < 168) return `${Math.floor(diffHours / 24)}天前`
      return parseTime(time, '{m}-{d}')
    },
    
    /** 获取预计完成时间 */
    getEstimatedCompletion(course) {
      if (course.status === 'completed') return '已完成'
      if (!course.totalProgress || course.totalProgress === 0) return '无法预估'
      
      const remainingProgress = 100 - course.totalProgress
      const avgWeeklyProgress = course.weeklyStudyTime * 2 // 假设每周进度
      const weeksNeeded = Math.ceil(remainingProgress / avgWeeklyProgress)
      
      if (weeksNeeded <= 1) return '本周内'
      if (weeksNeeded <= 4) return `${weeksNeeded}周内`
      return `${Math.ceil(weeksNeeded / 4)}个月内`
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.welcome-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 24px;
  color: white;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.welcome-subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.welcome-actions {
  display: flex;
  gap: 12px;
}

.stats-overview {
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
  }
  
  &.primary::before { background: #409eff; }
  &.success::before { background: #67c23a; }
  &.warning::before { background: #e6a23c; }
  &.info::before { background: #909399; }
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f0f9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  font-size: 24px;
  margin-bottom: 16px;
}

.stat-content {
  .stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #303133;
    margin-bottom: 8px;
  }
  
  .stat-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 12px;
  }
  
  .stat-trend {
    font-size: 12px;
    color: #67c23a;
    display: flex;
    align-items: center;
    gap: 4px;
    
    i {
      font-size: 10px;
    }
  }
}

.quick-filters {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.filter-tabs {
  .el-radio-button__inner {
    border-radius: 20px;
    padding: 8px 20px;
  }
}

.search-input {
  .el-input__inner {
    border-radius: 20px;
  }
}

.courses-container {
  margin-bottom: 32px;
}

.course-col {
  margin-bottom: 20px;
}

.course-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  
  &.completed {
    opacity: 0.8;
    
    .course-badge {
      background: #67c23a;
    }
  }
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.course-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
  font-weight: 500;
  
  &.badge-active {
    background: #409eff;
  }
  
  &.badge-completed {
    background: #67c23a;
  }
  
  &.badge-paused {
    background: #e6a23c;
  }
}

.course-actions {
  .el-icon-more {
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    
    &:hover {
      background: #f5f7fa;
    }
  }
}

.course-content {
  .course-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 12px 0;
    line-height: 1.4;
  }
  
  .course-description {
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
    margin: 0 0 20px 0;
    height: 42px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.course-progress {
  margin-bottom: 20px;
  
  .progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    
    .progress-text {
      font-size: 14px;
      color: #606266;
    }
    
    .progress-percentage {
      font-size: 16px;
      font-weight: 600;
      color: #409eff;
    }
  }
}

.course-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #909399;
    
    i {
      font-size: 14px;
    }
  }
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
  
  i {
    font-size: 64px;
    margin-bottom: 16px;
  }
  
  h3 {
    margin: 0 0 12px 0;
    color: #606266;
  }
  
  p {
    margin: 0 0 24px 0;
    font-size: 14px;
  }
}

.learning-suggestions {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
  
  i {
    color: #e6a23c;
  }
}

.suggestion-card {
  text-align: center;
  padding: 20px;
  
  .suggestion-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f0f9ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #409eff;
    font-size: 24px;
    margin: 0 auto 16px;
  }
  
  h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }
  
  p {
    margin: 0;
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
  }
}

.course-detail-content {
  .learning-path {
    margin-top: 24px;
    
    h4 {
      margin: 0 0 16px 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .path-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .step-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #e4e7ed;
  }
  
  .step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e4e7ed;
    color: #909399;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    
    &.completed {
      background: #67c23a;
      color: white;
    }
  }
  
  .step-content {
    flex: 1;
  }
  
  .step-title {
    font-weight: 600;
    color: #303133;
    margin-bottom: 4px;
  }
  
  .step-desc {
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
  }
}

.progress-display {
  font-weight: 600;
  color: #409eff;
}

@media (max-width: 768px) {
  .welcome-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .welcome-actions {
    justify-content: center;
  }
  
  .stats-overview .el-col {
    margin-bottom: 16px;
  }
  
  .course-col {
    width: 100% !important;
  }
  
  .filter-tabs {
    margin-bottom: 16px;
    
    .el-radio-button {
      margin-bottom: 8px;
    }
  }
}
</style>
